<template>
	<div class="info-content">
		<el-form label-width="100px">
			<div v-for="(item, index) in list.data" :key="index" style="margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #ccc">
				<div>
					<el-form-item label="图片：">
						<UploadBuild :file-code="'IMG'" :index="index" :fileUrl="item.url" @handleAvatarSuccess="handleAvatarSuccess"></UploadBuild>
					</el-form-item>

					<comOption :data="item" :index="index" @change="actionChange"></comOption>
				</div>
			</div>

			<div style="display: flex; flex-direction: column">
				<!-- <el-button type="danger" class="btn" size="small" @click="add">+添加一个</el-button> -->
				<el-button type="primary" class="btn" @click="submit">
					<el-icon class="el-icon--right"><ArrowLeft /></el-icon>生成预览</el-button
				>
			</div>
		</el-form>
	</div>
</template>

<script setup lang="ts" name="infoForm">
import { ElMessage } from 'element-plus';
import { ref, watch, nextTick, onBeforeMount } from 'vue';
import UploadBuild from '/@/components/upload/index.vue';
import comOption from '/@/components/comOption/index.vue';

const list = ref({});

const props = defineProps({
	// 列表内容
	data: {
		type: Object,
		default: () => {},
	},
	isRight: {
		type: Boolean,
		default: () => false,
	},
});

watch(
	() => props.data,
	(val) => {
		if (val) {
			list.value = JSON.parse(JSON.stringify(props.data));
			if (list.value.data && list.value.data.length <= 0) {
				add();
			}
		}
	}
);

function add() {
	list.value.data.push({});
}

function actionChange(actionData) {
	list.value.data[actionData.index] = {
		...list.value.data[actionData.index],
		...actionData.action,
	};

	emit('submit', list.value);
}

onBeforeMount(() => {
	list.value = JSON.parse(JSON.stringify(props.data));
	if (list.value.data.length <= 0) {
		add();
	}
});

function handleAvatarSuccess({ url, index }) {
	list.value.data[index].url = url;
}

const emit = defineEmits(['submit']);
function submit() {
	emit('submit', list.value);
}
</script>

<style lang="scss" scoped>
.info-content {
	padding: 20px;
}

.btn {
	width: 100%;
	margin-top: 15px;
	margin-left: 0;
}
</style>
